﻿@using thousandClear.Areas.Admin.Models;

@model List<ProjectModel>

<div id="divMain" style="width:100%; position:fixed; left:0px; top:0px; z-index:99999; background-color:white; filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;">

    <img src="~/Statics/Images/Activity/load.gif" style="position:fixed; width:10%; left:40%; top:40%" />
</div>

<div id="app">
    <div class="top-header ui-row-flex" style="padding:10px 0px;">
        <div class="top-header-return ui-col ui-col-10 ui-flex ui-flex-pack-start ui-flex-align-center" v-on:tap="back">
        </div>
        <div class="top-header-title ui-col ui-col-80 ui-flex ui-flex-align-center ui-flex-pack-center">
            <h2>填写地址</h2>
        </div>
        <div class="ui-col ui-col-10">
        </div>
    </div>
    <div class="product-receive">
        <div class="receive-info">
            <div class="ui-form ui-border-t">
                <form action="#">
                    <div class="ui-form-item ui-border-b">
                        <label>
                            选择日期
                        </label>
                        <input type="text" v-on:tap="setDay" id="day" placeholder="请输入日期" v-model="day">
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label>选择时间段</label>
                        <div class="ui-select-group">
                            <div class="ui-select">
                                <select v-model="time" v-on:change="SelectTime">
                                    <option value="9:00">上午9：00时段</option>
                                    <option value="14:00">下午14：00时段</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label>
                            客户
                        </label>
                        <input type="text" placeholder="名字" v-model="receiveMan">
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label>
                            手机号码
                        </label>
                        <input type="tel" placeholder="手机" v-model="receiveMobile">
                    </div>
                    <div class="ui-form-item ui-border-b address">
                        <label>选择地区</label>
                        <div class="ui-select-group">
                            <div class="ui-select">
                                <select v-on:change="onProvinceChange" v-model="SelectProvince" id="ddlProvince">
                                    <option value="0">请选择</option>
                                    <option v-bind:value="pvc.DATID" v-for="pvc in provinces">{{pvc.datDesc}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="ui-form-item ui-border-b" v-if="showCity">
                        <label></label>
                        <div class="ui-select-group">
                            <div class="ui-select" v-if="showCity">
                                <select v-on:change="onCityChange" v-model="SelectCity" id="ddlCity">
                                    <option value="0">请选择</option>
                                    <option v-bind:value="pvc.DATID" v-for="pvc in cities">{{pvc.datDesc}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="ui-form-item ui-border-b" v-if="showDistrict">
                        <label></label>
                        <div class="ui-select-group">
                            <div class="ui-select" v-if="showDistrict">
                                <select id="ddlBlock" v-model="SelectBlock">
                                    <option value="0">请选择</option>
                                    <option v-bind:value="pvc.DATID" v-for="pvc in block">{{pvc.datDesc}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="nomalAddress" class="ui-form-item ui-form-item-textarea ui-border-b address">
                        <label>
                            详细地址
                        </label>
                        <textarea id="orgAddress" placeholder="街道小区门牌信息" v-model="receiveAddress"></textarea>
                    </div>

                    <table cellpadding="0px" cellspacing="0px" border="0" id="spsAddress" style="width:100%; height:50px; display:none; border-bottom:1px solid #e3e3e3;">

                        <tr>
                            <td align="left" valign="middle" style="width:120px;">
                                <label style="margin-left:15px;">
                                    详细地址

                                </label>
                            </td>
                            <td valign="middle" style="width:60px;">
                                <label style="color:black;">
                                    玲珑湾

                                </label>
                            </td>
                            <td valign="middle" align="left">
                                <textarea id="sixAddress" placeholder="输入幢数及门牌号" v-model="receiveSixAddress" style="width:200px; height:30px; border:0px; margin-top:15px;"></textarea>
                            </td>
                        </tr>
                    </table>



                    <div class="ui-form-item ui-form-item-textarea ui-border-b">
                        <label>
                            备注
                        </label>
                        <textarea placeholder="备注信息" v-model="remark"></textarea>
                    </div>
                </form>
            </div>
            <div class="ui-btn-group">
                <button class="ui-btn ui-btn-danger" v-on:tap="back">返回</button>
                <button class="ui-btn ui-btn-primary" v-on:tap="buyConfirm">确认购买</button>
            </div>
        </div>
    </div>

    <form id="form" method="post" action="">
        <input type="hidden" name="data" v-bind:value="data" />
    </form>

</div>



@section Styles{
    @Styles.Render("~/cssbundles/consumer/address")
    <link href="~/Statics/css/Time.css" rel="stylesheet" />
    <style>
        body {
            background-color: #fbfbfb;
        }

        .top-header {
            font-size: 16px;
            color: black;
            background-color: white;
        }

        .ui-row-flex {
            background: white;
        }

        .top-header-title {
            font-weight: bold;
            text-align: center;
        }

        .ui-btn {
            height: 40px;
        }

        .top-header .ui-icon-return {
            font-size: 0.25rem;
            color: #fff3f9;
        }

        label {
            color: #6cc9eb;
        }

        .ui-form {
            margin: 20px 0px;
        }
    </style>

}

@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script src="~/Statics/Venders/uedit-1.4.3.1/ueditor.parse.min.js"></script>
    <script>

        $(function() {

            $("#divMain").css("height",$(window).height()+"px");
            closeLoading();

           
        });

        function showLoading(){

            $("#divMain").css("display","");
        }

        function closeLoading(){

            $("#divMain").css("display","none");
        }

        var isCABOLI = 0;

        var model = new Vue({
            el: '#app',
            data: {
                orderID:'@ViewBag.orderID',
                remark: '',
                receiveMobile: '',
                receiveMan: '',
                receiveAddress: '',
                showCity: false,
                showDistrict: false,
                provinces: @Html.Raw(ViewBag.Provinces),
                cities: '',
                block: '',
                SelectProvince: 0,
                SelectCity: 0,
                SelectBlock: 0,
                day:'',
                time:'9:00',
                openid:'@ViewBag.openid',
                timesure:'2',


            },
            computed: {

                setDay: function()
                {

                    var yu = new Date();
                    var tt = new Date(yu.getFullYear(), yu.getMonth(), (yu.getDate() +2));
                    var self=this;
                    $('#day').mobiscroll().date({
                        theme: 'mobiscroll',     // Specify theme like: theme: 'ios' or omit setting to use default
                        mode: 'mixed',       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
                        display: 'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default
                        lang: 'zh',       // Specify language like: lang: 'pl' or omit setting to use default
                        dateFormat: "yyyy年MMdd日",
                        minDate:tt,
                        onSelect: function (val, ins) {
                            var selectedDate = ins.getDate();
                            var date= new moment(selectedDate).format('YYYY-MM-DD 00:00:00');
                            //var d=new Date(Date.parse(date));
                            var dat=selectedDate.getDay();
                            self.day = parseInt(new moment(selectedDate).format('YYYYMMDD'));
                            self.SelectTime(dat);

                        }
                    });
                },
                data: function () {
                    return JSON.stringify(this._data);
                }
            },
            methods: {
                back: function () {
                    window.history.go(-2);
                },
                onProvinceChange: function () {

                    var self = this;
                    $.ajax({
                        type: "GET",
                        url: "changePlace/" + self.SelectProvince,
                        contentType: "application/json",
                        success: function (data) {
                            self.cities=eval(data);
                            self.showCity = true;
                            self.showDistrict=false;
                            self.SelectCity=0;
                            self.SelectBlock=0;

                            if(isCABOLI==1){
                                $("#ddlProvince").attr("disabled","disabled");
                                self.SelectCity=3;
                                $("#ddlCity").val("3");
                                self.onCityChange();
                            }
                        }
                    });
                },
                onCityChange: function () {
                    var self = this;
                    $.ajax({
                        type: "GET",
                        url: "changePlace/" + self.SelectCity,
                        contentType: "application/json",
                        success: function (data) {
                            self.block=eval(data);
                            self.showDistrict=true;
                            self.SelectBlock=0;

                            if(isCABOLI==1){
                                $("#ddlCity").attr("disabled","disabled");
                                self.SelectBlock=1;
                                
                                var ss = setTimeout(self.onBlck,1000);
                            }
                        }
                    });
                },
                onBlck: function(){
                    $("#ddlBlock").attr("disabled","disabled");
                },
                buyConfirm:function(){
                    var self = this;

                    if(self.day==""){
                        alert("请选择开始日期");
                        return;
                    }
                    if(self.timesure=="2"){
                        alert("该时间段已被预订");
                        return;
                    }
                    if(self.timesure=="3"){
                        alert("千净周日休息哟")
                        return;
                    }
                    if(self.timesure=="4"){
                        alert("擦窗活动截止到2016年9月30号， 请选择之前的日期")
                        return;
                    }
                    if(self.timesure=="10"){
                        alert("抱歉，千净5号前暂停接单哦！")
                        return;
                    }
                    if(self.receiveMan==""){
                        alert("请填写业主姓名");
                        return;
                    }
                    if(self.receiveMobile==""){
                        alert("请填写手机号");
                        return;
                    }
                    if(self.SelectProvince==""){
                        alert("请选择省份");
                        return;
                    }
                    if(self.SelectProvince==""){
                        alert("请选择市");
                        return;
                    }
                    if(self.SelectProvince==""){
                        alert("请选择区");
                        return;
                    }

                    if(isCABOLI==1){

                        if($("#sixAddress").val() == ""){
                            alert("请填写幢数和房号");
                            return;
                        }
                        else{

                        }
                    }
                    else{
                        if(self.receiveAddress==""){
                            alert("请填写详细地址");
                            return;
                        }
                    }

                    $("#form").submit();
                },
                showError:function(msg){
                    swal({
                        title: "",
                        text: msg,
                        type: "error",
                        showConfirmButton: false,
                        showCancelButton: false,
                        timer: 2000,
                    });
                },
                showSuccess:function(msg){
                    swal({
                        title: "",
                        text: msg,
                        type: "success",
                        showConfirmButton: false,
                        showCancelButton: false,
                        timer: 2000,
                    });
                },

                SelectTime:function(sat){
                    var self = this;
                    var data={ id:self.orderID, time:self.time,day:self.day };
                    if(self.day!=null){
                        $.ajax({
                            type: "GET",
                            url: "SelectTime",
                            data:data,
                            dataType:"json",
                            contentType: "application/json",
                            success: function (data) {

                                var tyu = data.d;

                                if(data=="2"){

                                    self.showError("该时间段已被预订！");
                                    self.timesure="2";
                                }
                                else if(data=="0"){

                                    self.showError("千净周日休息哟");
                                    self.timesure="3";
                                }
                                else if(data=="4"){

                                    self.showError("擦窗活动截止到2016年9月30号， 请选择之前的日期");
                                    self.timesure="4";
                                }
                                else if(data=="10"){

                                    self.showError("抱歉，千净5号前暂停接单哦！");
                                    self.timesure="10";
                                }
                                else if(data=="5"){

                                    isCABOLI = 1;
                                    self.timesure="1";

                                    $("#nomalAddress").css("display","none");
                                    $("#spsAddress").css("display","block");
                                     
                                    $("#ddlProvince").val("5");
                                    self.SelectProvince="5";
                                    self.onProvinceChange();
                                    
                                }
                                else{
                                    self.timesure="1";
                                }
                            }
                        });
                    }
                }
            }

        })


    </script>
}